<template>
    <div class="banner-box">
        <div class="nav-box">
            <div class="slide-box">
                <el-carousel :interval="3000" arrow="never" autoplay>
                    <el-carousel-item v-for="item in state.bannerList" :key="item" :style="dynamicStyle(item)">
                        <div class="banner-container"><img :src="require('@/assets/images/banner/' + item.imgUrl)" alt=""></div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <!--小导航 -->
        <div class="small-nav">
            <el-row>
                <el-col :span="6">
                    <div class="nav">
                        <img class="logo" src="~/images/navsmall.jpg" alt="" />
                        <div class="title">商品分类</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="nav">
                        <img class="logo" src="~/images/huismall.jpg" alt="" />
                        <div class="title">大聚惠</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="nav">
                        <img class="logo" src="~/images/mansmall.jpg" alt="" />
                        <div class="title">个人中心</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="nav">
                        <img class="logo" src="~/images/moneysmall.jpg" alt="" />
                        <div class="title">投资理财</div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup lang="ts">
import { bannerApi } from '@/api/index/snow'
import {onMounted, reactive, ref} from "vue";
const state = reactive({
    bannerList: []
})

const dynamicStyle = (item: any) => {
    return {
        background: item.imgBgColor
    }
}

onMounted(() => {
    getBannerList()
})
const getBannerList = () => {
    bannerApi().then(res => {
        if(res) {
            state.bannerList = res.data.data
        }
    })
}
</script>
<style scoped lang="scss">
.banner-box{
    position: relative;
    margin: 0 40px 10px 0;
    padding-bottom: 5px;
    .nav-box{
        border-top: 2px solid #d2364c;
        .slide-box{
            ::v-deep(.el-carousel__container){
                height: 360px;
            }
            .banner-container{
                max-width: 1000px;
                margin: 0 auto;
            }
        }
    }
    .small-nav{
        display: none;
    }
    @media only screen and (max-width: 1025px){
        .small-nav{
            padding: 10px 0;
            display: block;
            .nav{
                cursor: pointer;
            }
            .logo{
                width: 60px;
            }
        }
    }
}
</style>